﻿@model YouWei.Infrastructure.Models.CarGroupDto
@{
    ViewBag.Title = "群组管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<section class="content-header">
    <h1>
        群组管理
        <small></small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>主页</a></li>
        <li><a href="#" id="preBtn">群组管理列表</a></li>
        <li class="active">群组管理</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header">
                </div>
                <!-- /.box-header -->
                <div class="box-body table-responsive no-padding">
                    <form class="form-horizontal" id="form1">
                        <div class="box-body">
                            <input type="hidden" name="ID" value="@Model.CarGroupID" />
                            <div class="form-group">
                                <label class="col-sm-2 control-label">名称</label>
                                <div class="col-sm-3">
                                    <input type="text" name="txtName" id="txtName" value="@Model.CarGroupName" class="form-control" maxlength="50">
                                </div>
                            </div>
                            <div class="form-group" id="SelCarBrand">
                                <label class="col-sm-2 control-label">品牌</label>
                                <div class="col-sm-3" id="SelBrandDiv">
                                    <select id="selBrand" name="selBrand" class="form-control">
                                        <option value="0">全部</option>
                                    </select>

                                </div>
                                <div class="col-sm-3" id="SelModelDiv">
                                    <select id="selModel" name="selModel" class="form-control">
                                        <option value="">全部</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <button type="button" class="btn btn-info btn-xs" style="margin-top:5px;" id="AddCarBrandBtn"> 添 加 </button>
                                </div>
                            </div>
                            <div class="form-group" data-toggle="distpicker" data-province="@Model.ProvinceName" data-city="@Model.CityName">
                                <label class="col-sm-2 control-label">城市</label>
                                <div class="col-sm-3">
                                    <select name="HProince" id="HProince" class="form-control"></select>
                                </div>
                                <div class="col-sm-3">
                                    <select name="HCity" id="HCity" class="form-control"></select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">群数量</label>
                                <div class="col-sm-3">
                                    <input type="text" name="txtWxGroupCount" id="txtWxGroupCount" value="@Model.WxGroupCount" class="form-control" maxlength="200">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">管理员微信号</label>
                                <div class="col-sm-3">
                                    <input type="text" name="txtManager" id="txtManager" value="@Model.Manager" class="form-control" maxlength="200">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">管理员名称</label>
                                <div class="col-sm-3">
                                    <input type="text" name="txtNickName" id="txtNickName" value="@Model.NickName" class="form-control" maxlength="200">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">男姓数量</label>
                                <div class="col-sm-3">
                                    <input type="text" name="txtManTotal" id="txtManTotal" value="@Model.ManTotal" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">女性数量</label>
                                <div class="col-sm-3">
                                    <input type="text" name="txtWomanTotal" id="txtWomanTotal" value="@Model.WoManTotal" class="form-control">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">描述</label>
                                <div class="col-sm-3">
                                    <textarea name="txtDescription" id="txtDescription" class="form-control" maxlength="200">@Model.Description</textarea>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">管理员头像</label>
                                <div class="col-sm-3">
                                    <div id="HeadUrl" class="dm-uploader">
                                        <div role="button" class="btn btn-primary mr-2">
                                            <i class="fa fa-fw fa-folder-o"></i>图片上传
                                            <input type="file" title="Click to add Files">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-3">
                                    <div class="over-hidden" style="">
                                        @if (Model.CarGroupID > 0)
                                        {
                                        <div id="divImgHeadUrl" class="img-wrapper-titlephoto fl" style="display: block;">
                                            <img id="imgPhotoHeadUrl" style="width: 360px; height: 160px;border:1px solid #ccc " src="@string.Format(" {0}/{1}", YouWei.Utility.ConfigHelper.GetAppSettingValue("CommentImageServerUrl"), Model.HeadUrl)" />
                                            <input type="hidden" id="hidDbUrlHeadUrl" value="@Model.HeadUrl" />
                                        </div>
                                        }
                                        else
                                        {
                                        <div id="divImgHeadUrl" class="img-wrapper-titlephoto fl" style="display: none;">
                                            <img id="imgPhotoHeadUrl" style="width: 360px; height: 160px;border:1px solid #ccc " src="" />
                                            <input type="hidden" id="hidDbUrlHeadUrl" />

                                        </div>
                                        }
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">LOGO</label>
                                <div class="col-sm-3">
                                    <div id="HeadImageUrl" class="dm-uploader">
                                        <div role="button" class="btn btn-primary mr-2">
                                            <i class="fa fa-fw fa-folder-o"></i>图片上传
                                            <input type="file" title="Click to add Files">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-3">
                                    <div class="over-hidden" style="">
                                        @if (Model.CarGroupID > 0)
                                        {
                                        <div id="divImg" class="img-wrapper-titlephoto fl" style="display: block;">
                                            <img id="imgPhoto" style="width: 360px; height: 160px;border:1px solid #ccc " src="@string.Format(" {0}/{1}", YouWei.Utility.ConfigHelper.GetAppSettingValue("CommentImageServerUrl"), Model.LogoUrl)" />
                                            <input type="hidden" id="hidDbUrl" value="@Model.LogoUrl" />
                                        </div>
                                        }
                                        else
                                        {
                                        <div id="divImg" class="img-wrapper-titlephoto fl" style="display: none;">
                                            <img id="imgPhoto" style="width: 360px; height: 160px;border:1px solid #ccc " src="" />
                                            <input type="hidden" id="hidDbUrl" />

                                        </div>
                                        }
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">管理员二维码</label>
                                <div class="col-sm-3">
                                    <div id="QrCodeUrl" class="dm-uploader">
                                        <div role="button" class="btn btn-primary mr-2">
                                            <i class="fa fa-fw fa-folder-o"></i>图片上传
                                            <input type="file" title="Click to add Files">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-3">
                                    <div class="over-hidden" style="">
                                        @if (Model.CarGroupID > 0)
                                        {
                                        <div id="divImgQrCodeUrl" class="img-wrapper-titlephoto fl" style="display: block;">
                                            <img id="imgPhotoQrCodeUrl" style="width: 360px; height: 160px;border:1px solid #ccc " src="@string.Format(" {0}/{1}", YouWei.Utility.ConfigHelper.GetAppSettingValue("CommentImageServerUrl"), Model.QrCodeUrl)" />
                                            <input type="hidden" id="hidDbUrlQrCodeUrl" value="@Model.QrCodeUrl" />
                                        </div>
                                        }
                                        else
                                        {
                                        <div id="divImgQrCodeUrl" class="img-wrapper-titlephoto fl" style="display: none;">
                                            <img id="imgPhotoQrCodeUrl" style="width: 360px; height: 160px;border:1px solid #ccc " src="" />
                                            <input type="hidden" id="hidDbUrlQrCodeUrl" />

                                        </div>
                                        }
                                    </div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer text-center">
                                <button class="btn btn-info" type="button" id="btnSave">保存</button>
                            </div>
                            <!-- /.box-footer -->
                        </div>
                    </form>
                </div>
                <div class="box-footer clearfix ">
                </div>
                <!-- /.box-body -->
                <!-- /.box -->
            </div>
        </div>
    </div>
</section>
@section scriptsBottom{
<script type="text/javascript">
    var userId = 0; //是否是添加页面，如果是编辑页则判断条件增加ID
    $(document).ready(function () {
        renderImg();
        initFormValidate();
        binds();
        var modelObj = $("#selModel");
        bindBrand(0);

        $("#selBrand").change(function () {
            var bid = $(this).val();
            if (bid > 0) {
                bindModel(bid,modelObj,0);
            } else {
                modelObj.empty();
                modelObj.append('<option value=0>全部</option>');
            }
        });

        $("#AddCarBrandBtn").click(function(){
            AddSelectCarBrand();
        });
    });

    //保存
    function save() {
        var gid = @Model.CarGroupID;
        var brandArr = [];
        var modelArr = [];
        var isTrue = false;
        var msg = "";

        var bootstrapValidator = $("#form1").data('bootstrapValidator');
        bootstrapValidator.validate();
        if (bootstrapValidator.isValid()) {
            if (gid==0) {
                $('select[name="selBrand"]').each(function(){
                    var ba = $(this).val();
                    if (ba==0) {
                        msg = "请选择品牌";
                        isTrue = true;
                        return;
                    }
                    brandArr.push(ba);
                });

                $('select[name="selModel"]').each(function(){
                    var ba = $(this).val();
                    if (ba=="") {
                        msg = "请选择车型";
                        isTrue = true;
                        return;
                    }
                    modelArr.push(ba);
                });
            }
            if (isTrue) {
                BMCW.alert(msg);
                return;
            }
            var url = '@Url.Action("SaveCarGroup", "Public")';
            var options = {
                url: url,
                type: "POST",
                data: {
                    CarGroupID: gid,
                    CarGroupName: $("#txtName").val(),
                    BrandID: brandArr,//$("#selBrand").val(),
                    ModelID: modelArr,//$("#selModel").val(),
                    Description: $("#txtDescription").val(),
                    HeadUrl: $("#hidDbUrlHeadUrl").val(),
                    LogoUrl: $("#hidDbUrl").val(),
                    ManTotal: $("#txtManTotal").val(),
                    WoManTotal: $("#txtWomanTotal").val(),
                    WxGroupCount: $("#txtWxGroupCount").val(),
                    Manager: $("#txtManager").val(),
                    QrCodeUrl: $("#hidDbUrlQrCodeUrl").val(),
                    NickName: $("#txtNickName").val(),
                    CityID: $("#HCity").val()
                },
                success: function (o) {
                    if (o.status == 0) {
                        BMCW.msg("保存成功", function () {
                            location.href='@Url.Action("CarGroupList", "Public")';
                        });
                    } else {
                        BMCW.alert(o.message);
                    }
                }
            };

            BMCW.ajax(options);
        }
    }
    function binds() {
        //保存
        $("#btnSave").click(function () {
            save();
        });
        $("#preBtn").click(function () {
            var url = '@Url.Action("CarGroupList", "Public")';
            location.href = url;
        })
    }

    function initFormValidate() {
        $("#form1").bootstrapValidator({
            submitHandler: function (valiadtor, loginForm, submitButton) {
                valiadtor.defaultSubmit();
            },
            fields: {
                txtName: {
                    validators: {
                        notEmpty: {
                            message: '请输入卡名称'
                        }
                    }
                },
                selModel: {
                    validators: {
                        notEmpty: {
                            message: '请选择车型'
                        }
                    }
                },
                HCity: {
                    validators: {
                        notEmpty: {
                            message: '请选择城市'
                        }
                    }
                },
                txtTotal: {
                    validators: {
                        notEmpty: {
                            message: '请输入数量'
                        },
                        numeric: {
                            message: '数量只能输入数字'
                        }
                    }
                },
                txtDescription:{
                    stringLength : {
                        max : 200,
                        message : '不超过200个字符'
                    }
                }
            }
        });
    }

    function bindBrand(bid)
    {
        var url = '@Url.Action("GetBrandList", "Public")';
        BMCW.ajax({
            url: url,
            type: "GET",
            success: function (o) {
                if (o.length > 0) {
                    for (var i = 0; i < o.length; i++) {
                        if (o[i].BrandID==bid) {
                            $("#selBrand").append('<option value=' + o[i].BrandID + ' selected="true">' + o[i].BrandName + '</option>');
                        }else{
                            $("#selBrand").append('<option value=' + o[i].BrandID + '>' + o[i].BrandName + '</option>');
                        }

                    }
                    bindGroupBrand();
                } else {
                    BMCW.alert(o.message);
                }
            }
        });
    }

    function bindModel(bid,modelObj,mid) {
        var url = '@Url.Action("GetSerialList", "Public")?brandId=' + bid;
        modelObj.empty();
        modelObj.append('<option value="">全部</option>');
        BMCW.ajax({
            url: url,
            type: "GET",
            success: function (o) {
                if (o.length > 0) {
                    for (var i = 0; i < o.length; i++) {
                        if (o[i].SerialID==mid) {
                            modelObj.append('<option value=' + o[i].SerialID + ' selected="true">' + o[i].SerialName + '</option>');
                        }else{
                            modelObj.append('<option value=' + o[i].SerialID + '>' + o[i].SerialName + '</option>');
                        }

                    }

                } else {
                    //BMCW.alert(o.message);
                }
            }
        });
    }

    function renderImg() {
        $('#HeadImageUrl').dmUploader({ //
            url: '@Url.Action("UploadImg", "Product")',
            maxFileSize: 3000000, // 3 Megs max
            multiple: false,
            allowedTypes: 'image/*',
            extFilter: ['jpg', 'jpeg', 'png', 'gif'],
            onUploadSuccess: function (id, response) {
                if (response.status==0) {
                    var oData = response.data;
                    $("#imgPhoto").attr("src",oData.HttpImgUrl);
                    $("#hidDbUrl").val(oData.ImgUrl);//存数据库里的相对路径
                    $("#divImg").show();
                    $("#hidImgPhoto-error").remove();
                } else {
                    alert(response.data.message);
                }
            }
        });

        $('#HeadUrl').dmUploader({ //
            url: '@Url.Action("UploadImg", "Product")',
            maxFileSize: 3000000, // 3 Megs max
            multiple: false,
            allowedTypes: 'image/*',
            extFilter: ['jpg', 'jpeg', 'png', 'gif'],
            onUploadSuccess: function (id, response) {
                if (response.status==0) {
                    var oData = response.data;
                    $("#imgPhotoHeadUrl").attr("src",oData.HttpImgUrl);
                    $("#hidDbUrlHeadUrl").val(oData.ImgUrl);//存数据库里的相对路径
                    $("#divImgHeadUrl").show();
                    $("#hidImgPhoto-error").remove();
                } else {
                    alert(response.data.message);
                }
            }
        });

        $('#QrCodeUrl').dmUploader({ //
            url: '@Url.Action("UploadImg", "Product")',
            maxFileSize: 3000000, // 3 Megs max
            multiple: false,
            allowedTypes: 'image/*',
            extFilter: ['jpg', 'jpeg', 'png', 'gif'],
            onUploadSuccess: function (id, response) {
                if (response.status==0) {
                    var oData = response.data;
                    $("#imgPhotoQrCodeUrl").attr("src",oData.HttpImgUrl);
                    $("#hidDbUrlQrCodeUrl").val(oData.ImgUrl);//存数据库里的相对路径
                    $("#divImgQrCodeUrl").show();
                    $("#hidImgPhoto-error").remove();
                } else {
                    alert(response.data.message);
                }
            }
        });
    }

    function AddSelectCarBrand()
    {
        var n =  $('select[name="selBrand"]').length;
        if (n>=10) {
            BMCW.alert("最多只能添加10个车型");
            return ;
        }
        var html ="<div class=\"form-group\"><label class=\"col-sm-2 control-label\">品牌</label>";
        var brandhtml = GetBrand(n);
        var modehtml = GetModel(n);
        html += "<div class=\"col-sm-3\">"+brandhtml+"</div><div class=\"col-sm-3\">"+modehtml+"</div><div class=\"col-sm-2\"> <button type=\"button\" class=\"btn btn-danger btn-xs\" onclick=\"RemoveBrand("+n+")\">删除</button></div></div>";
        var divObj = $("#SelCarBrand");
        if (n>1) {
            divObj = $("#selBrand"+(n-1)).parent().parent();
        }
        divObj.after(html);
        var modelObj = $("#selModel"+n);
        $("#selBrand"+n).change(function () {
            var bid = $(this).val();
            if (bid > 0) {
                bindModel(bid,modelObj,0);
            } else {
                modelObj.empty();
                modelObj.append('<option value=0>全部</option>');
            }
        });
        n++;
    }

    function GetBrand(n)
    {
        var str = "<select id=\"selBrand"+n+"\" name=\"selBrand\" class=\"form-control\">";
        $("#selBrand option").each(function(){  //遍历全部option
            str+='<option value=' + $(this).val() + '>' +$(this).text() + '</option>';
        });
        str+="</select>";
        return str;
    }

    function GetModel(n)
    {
        var str = "<select id=\"selModel"+n+"\" name=\"selModel\" class=\"form-control\"><option value=\"\">全部</option></select>";
        return str;
    }

    function RemoveBrand(n)
    {
        $("#selBrand"+n).parent().parent().remove();
    }

    function bindGroupBrand()
    {
        var gid = @Model.CarGroupID;
        if (gid==0) {
            return;
        }
        var url = '@Url.Action("GetGroupBrands", "Public")?groupId=' + gid;
        BMCW.ajax({
            url: url,
            type: "GET",
            success: function (o) {
                if (o.length > 0) {
                    for (var i = 0; i < o.length; i++) {
                        bindSelectCarBrand(o[i]);
                    }
                    $("#SelCarBrand").hide();
                } else {
                    //BMCW.alert(o.message);
                }
            }
        });
    }

    function bindSelectCarBrand(o)
    {
        var html ="<div class=\"form-group\"><label class=\"col-sm-2 control-label\">品牌</label>";
        html += "<div class=\"col-sm-3\" style=\"margin-top:7px;\">"+o.BrandName+"</div><div class=\"col-sm-3\" style=\"margin-top:7px;\">"+o.SerialName+"</div><div class=\"col-sm-2\"></div></div>";
        var divObj = $("#SelCarBrand");
        divObj.after(html);

    }


</script>
}
